<template>
  <div class="container">
    <van-nav-bar title="佣金打款" left-arrow @click-left="onClickLeft" />
    <div class="top">
      <div class="wait_order">
        <div style="color:#333333;font-size:12px;margin-bottom:4px">待打款订单</div>
        <div style="color:#020C1D;font-size:16px;font-weight:bold;">{{moneyInfo.wait_count}}</div>
      </div>
      <div class="wait_money">
        <div style="color:#333333;font-size:12px;margin-bottom:4px">待打款金额</div>
        <div style="color:#020C1D;font-size:16px;font-weight:bold;">{{moneyInfo.wait_money}}</div>
      </div>
      <div class="today_money">
        <div style="color:#333333;font-size:12px;margin-bottom:4px">今日打款</div>
        <div style="color:#020C1D;font-size:16px;font-weight:bold;">{{moneyInfo.today_money}}</div>
      </div>
      <div class="history_add">
        <div style="color:#333333;font-size:12px;margin-bottom:4px">历史累计</div>
        <div style="color:#020C1D;font-size:16px;font-weight:bold;">{{moneyInfo.total_money}}</div>
      </div>
    </div>
    <div class="tabs_container">
      <div
        @click="choosetab('one')"
        :class="activeName === 'one' ? 'wares' : 'initial'"
        v-if="info.status != 10"
      >
        佣金待打款
        <div class="line" v-if="activeName === 'one'"></div>
      </div>
      <div @click="choosetab('one')" :class="activeName === 'one' ? 'wares' : 'initial'" v-else>
        佣金待打款
        <div class="line" v-if="activeName === 'one'"></div>
      </div>
      <div
        v-if="info.status != 10"
        @click="choosetab('two',10)"
        :class="activeName === 'two' ? 'wares' : 'initial'"
        style="margin-left:30px"
      >
        佣金已打款
        <div class="line" v-if="activeName === 'two'"></div>
      </div>
      <div
        v-else
        @click="choosetab('two',10)"
        :class="activeName === 'two' ? 'wares' : 'initial'"
        style="margin-left:30px"
      >
        佣金已打款
        <div class="line" v-if="activeName === 'two'"></div>
      </div>
    </div>
    <div class="search_for">
      <div class="input_box">
        <el-input placeholder="提现人" v-model="info.merchant_name" />
        <div class="search_btn" @click="searchClick">搜索</div>
      </div>
      <div class="filter">
        <div style="font-size:13px;display:flex;align-items:center" @click="statusModal = true">
          打款状态
          <img
            src="../../../static/appimg/arrowpng.png"
            alt
            style="width:6px;height:3px;margin-left:5px"
          />
        </div>
        <div
          style="font-size:13px;margin-left:30px;display:flex;align-items:center"
          @click="timeModal = true"
        >
          打款时间
          <img
            src="../../../static/appimg/funnel.png"
            alt
            style="width:10px;height:7px;margin-left:5px;margin-top:2px"
          />
        </div>
      </div>
    </div>
    <!-- 这边是待打款 -->
    <div v-if="activeName === 'one'">
      <!-- 列表 -->
      <div v-for="(item,index) in list" :key="item.id" class="list">
        <div style="margin:10px 0;color:#333333;font-size:14px">{{item.withdraw_at}}</div>
        <div class="inner">
          <div
            style="display:flex;justify-content:space-between;align-items:center;margin-top:20px"
          >
            <div style="color:#787D85;font-size:14px">提现人</div>
            <div style="color:#020C1D;font-size:14px">{{item.shop_name}}</div>
          </div>
          <div
            style="display:flex;justify-content:space-between;align-items:center;margin-top:20px"
          >
            <div style="color:#787D85;font-size:14px">提现金额</div>
            <div style="color:#020C1D;font-size:14px">{{item.sum_commission}}</div>
          </div>
          <div
            style="display:flex;justify-content:space-between;align-items:center;margin-top:20px"
          >
            <div style="color:#787D85;font-size:14px">发票类型</div>
            <div style="color:#020C1D;font-size:14px">{{item.invoice_info}}</div>
          </div>
          <div
            style="display:flex;justify-content:space-between;align-items:center;margin-top:20px"
          >
            <div style="color:#787D85;font-size:14px">扣除税点金额</div>
            <div style="color:#020C1D;font-size:14px">{{item.tax_amount}}</div>
          </div>
          <div
            style="display:flex;justify-content:space-between;align-items:center;margin-top:20px"
          >
            <div style="color:#787D85;font-size:14px">打款状态</div>
            <div v-if="item.status == 10" style="color:#249324;font-size:14px">已打款</div>
            <div v-if="item.status == 0" style="color:#FE3D3D;font-size:14px">待打款</div>
            <div
              v-if="item.status == 1"
              style="color:#FE3D3D;font-size:14px;display:flex;wdith:60px"
            >
              <img
                src="../../../static/appimg/warn.png"
                alt
                style="width:18px;hieght:18px;margin-right:5px"
              />打款失败
            </div>
            <div v-if="item.status == 2" style="color:#FE3D3D;font-size:14px">打款中</div>

            <div
              v-if="item.status == 5"
              style="color:#FE3D3D;font-size:14px;display:flex;wdith:60px"
            >
              <img
                src="../../../static/appimg/warn.png"
                alt
                style="width:18px;hieght:18px;margin-right:5px"
              />已驳回
            </div>
            <div v-if="item.status == 11" style="color:#FE3D3D;font-size:14px">已自动打款</div>
            <div v-if="item.status == 15" style="color:#FE3D3D;font-size:14px">自动打款失败</div>
          </div>
          <div class="failed_reason" v-if="item.status == 1">*失败原因：{{item.failed_reason}}</div>
          <div class="btn_container">
            <div class="btn_inner">
              <div
                class="detail"
                v-if="item.status == 10 || item.status == 11"
                @click="detailClick(item)"
              >查看详情</div>
              <div
                class="reject"
                v-if="
                    item.status == 0 ||
                    item.status == 1 ||
                    item.status == 15
                  "
                @click="rejectClick(item,index)"
              >驳回</div>
              <div
                class="send_money"
                v-if="
                    item.status == 0 ||
                    item.status == 1 ||
                    item.status == 15
                  "
                @click="onPayment(item)"
              >打款</div>
            </div>
          </div>
        </div>
      </div>

      <div style="text-align:center;margin-top:20px" v-loadMore="{changeStatus}">
        <van-loading v-show="show" size="24px">加载中...</van-loading>
        <span v-if="showIf" style="color:#787D85;font-size:14px;">{{showText}}</span>
      </div>
      <!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div v-for="item in list" :key="item.id" class="list">
          <div style="margin:10px 0;color:#333333;font-size:14px">{{item.withdraw_at}}</div>
          <div class="inner">
            <div
              style="display:flex;justify-content:space-between;align-items:center;margin-top:20px"
            >
              <div style="color:#787D85;font-size:14px">提现人</div>
              <div style="color:#020C1D;font-size:14px">{{item.shop_name}}</div>
            </div>
            <div
              style="display:flex;justify-content:space-between;align-items:center;margin-top:20px"
            >
              <div style="color:#787D85;font-size:14px">提现金额</div>
              <div style="color:#020C1D;font-size:14px">{{item.sum_commission}}</div>
            </div>
            <div
              style="display:flex;justify-content:space-between;align-items:center;margin-top:20px"
            >
              <div style="color:#787D85;font-size:14px">发票类型</div>
              <div style="color:#020C1D;font-size:14px">{{item.invoice_info}}</div>
            </div>
            <div
              style="display:flex;justify-content:space-between;align-items:center;margin-top:20px"
            >
              <div style="color:#787D85;font-size:14px">扣除税点金额</div>
              <div style="color:#020C1D;font-size:14px">{{item.tax_amount}}</div>
            </div>
            <div
              style="display:flex;justify-content:space-between;align-items:center;margin-top:20px"
            >
              <div style="color:#787D85;font-size:14px">打款状态</div>
              <div v-if="item.status == 10" style="color:#249324;font-size:14px">已打款</div>
              <div v-if="item.status == 0" style="color:#FE3D3D;font-size:14px">待打款</div>
              <div
                v-if="item.status == 1"
                style="color:#FE3D3D;font-size:14px;display:flex;wdith:60px"
              >
                <img
                  src="../../../static/appimg/warn.png"
                  alt
                  style="width:18px;hieght:18px;margin-right:5px"
                />打款失败
              </div>
              <div v-if="item.status == 2" style="color:#FE3D3D;font-size:14px">打款中</div>

              <div
                v-if="item.status == 5"
                style="color:#FE3D3D;font-size:14px;display:flex;wdith:60px"
              >
                <img
                  src="../../../static/appimg/warn.png"
                  alt
                  style="width:18px;hieght:18px;margin-right:5px"
                />已驳回
              </div>
              <div v-if="item.status == 11" style="color:#FE3D3D;font-size:14px">已自动打款</div>
              <div v-if="item.status == 15" style="color:#FE3D3D;font-size:14px">自动打款失败</div>
            </div>
            <div class="failed_reason" v-if="item.status == 1">*失败原因：{{item.failed_reason}}</div>
            <div class="btn_container">
              <div class="btn_inner">
                <div
                  class="detail"
                  v-if="item.status == 10 || item.status == 11"
                  @click="detailClick(item)"
                >查看详情</div>
                <div
                  class="reject"
                  v-if="
                      item.status == 0 ||
                      item.status == 1 ||
                      item.status == 15
                    "
                  @click="rejectClick(item)"
                >驳回</div>
                <div
                  class="send_money"
                  v-if="
                      item.status == 0 ||
                      item.status == 1 ||
                      item.status == 15
                    "
                >打款</div>
              </div>
            </div>
          </div>
        </div>
      </van-list>-->
    </div>

    <!-- 这边是已打款 -->
    <div v-if="activeName === 'two'" class="tabulate">
      <div v-for="(item,index) in list" :key="item.id" class="list">
        <div style="margin:10px 0;color:#333333;font-size:14px">{{item.withdraw_at}}</div>
        <div class="inner">
          <div
            style="display:flex;justify-content:space-between;align-items:center;margin-top:20px"
          >
            <div style="color:#787D85;font-size:14px">提现人</div>
            <div style="color:#020C1D;font-size:14px">{{item.shop_name}}</div>
          </div>
          <div
            style="display:flex;justify-content:space-between;align-items:center;margin-top:20px"
          >
            <div style="color:#787D85;font-size:14px">提现金额</div>
            <div style="color:#020C1D;font-size:14px">{{item.sum_commission}}</div>
          </div>
          <div
            style="display:flex;justify-content:space-between;align-items:center;margin-top:20px"
          >
            <div style="color:#787D85;font-size:14px">发票类型</div>
            <div style="color:#020C1D;font-size:14px">{{item.invoice_info}}</div>
          </div>
          <div
            style="display:flex;justify-content:space-between;align-items:center;margin-top:20px"
          >
            <div style="color:#787D85;font-size:14px">扣除税点金额</div>
            <div style="color:#020C1D;font-size:14px">{{item.tax_amount}}</div>
          </div>
          <div
            style="display:flex;justify-content:space-between;align-items:center;margin-top:20px"
          >
            <div style="color:#787D85;font-size:14px">打款状态</div>
            <div v-if="item.status == 10" style="color:#249324;font-size:14px">已打款</div>
            <div v-if="item.status == 0" style="color:#FE3D3D;font-size:14px">待打款</div>
            <div
              v-if="item.status == 1"
              style="color:#FE3D3D;font-size:14px;display:flex;wdith:60px"
            >
              <img
                src="../../../static/appimg/warn.png"
                alt
                style="width:18px;hieght:18px;margin-right:5px"
              />打款失败
            </div>
            <div v-if="item.status == 2" style="color:#FE3D3D;font-size:14px">打款中</div>

            <div
              v-if="item.status == 5"
              style="color:#FE3D3D;font-size:14px;display:flex;wdith:60px"
            >
              <img
                src="../../../static/appimg/warn.png"
                alt
                style="width:18px;hieght:18px;margin-right:5px"
              />已驳回
            </div>
            <div v-if="item.status == 11" style="color:#FE3D3D;font-size:14px">已自动打款</div>
            <div v-if="item.status == 15" style="color:#FE3D3D;font-size:14px">自动打款失败</div>
          </div>
          <div class="failed_reason" v-if="item.status == 1">*失败原因：{{item.failed_reason}}</div>
          <div class="btn_container">
            <div class="btn_inner">
              <div
                class="detail"
                v-if="item.status == 10 || item.status == 11"
                @click="detailClick(item)"
              >查看详情</div>
              <div
                class="reject"
                v-if="
                    item.status == 0 ||
                    item.status == 1 ||
                    item.status == 15
                  "
                @click="rejectClick(item,index)"
              >驳回</div>
              <div
                class="send_money"
                v-if="
                    item.status == 0 ||
                    item.status == 1 ||
                    item.status == 15
                  "
                @click="onPayment(item)"
              >打款</div>
            </div>
          </div>
        </div>
      </div>
      <div style="text-align:center;margin-top:20px" v-loadMore="{changeStatus}">
        <van-loading v-show="show2" size="24px">加载中...</van-loading>
        <span v-if="showIf2" style="color:#787D85;font-size:14px;">{{showText}}</span>
      </div>
    </div>
    <!-- 打款状态检索 -->
    <van-popup
      v-model="statusModal"
      position="bottom"
      :style="{ height: '25%' ,borderRadius:'20px 20px 0 0',padding:'15px'}"
    >
      <div class="commission_interval">
        <div
          class="commission_item"
          :style="{color:isColor==1?'#2757FF':'#787D85'}"
          @click="isColorfun(1);"
        >待打款</div>
        <div
          class="commission_item"
          :style="{color:isColor==2?'#2757FF':'#787D85'}"
          @click="isColorfun(2);"
        >打款失败</div>
        <div
          class="commission_item"
          :style="{color:isColor==3?'#2757FF':'#787D85'}"
          @click="isColorfun(3);"
        >打款中</div>
        <div
          class="commission_item"
          :style="{color:isColor==4?'#2757FF':'#787D85'}"
          @click="isColorfun(4);"
        >已驳回</div>
      </div>
      <div style="display:flex;justify-content:space-between;margin-top:40px">
        <div class="insearch" @click="recallClick">检索</div>
        <div class="inreset" @click="resetClick">重置</div>
      </div>
    </van-popup>
    <!-- 打款时间检索 -->
    <van-popup
      v-model="timeModal"
      position="bottom"
      :style="{ height: '30%' ,borderRadius:'20px 20px 0 0',padding:'15px'}"
    >
      <van-field
        readonly
        clickable
        name="datetimePicker"
        :value="info.start"
        label="开始时间"
        placeholder="点击选择时间"
        @click="showPickerStart = true"
      />
      <van-popup v-model="showPickerStart" position="bottom">
        <van-datetime-picker
          v-model="start"
          type="datetime"
          title="选择结束时间"
          @confirm="(time)=>onConfirm(time,'start')"
          @cancel="showPickerStart = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        name="datetimePicker"
        :value="info.end"
        label="结束时间"
        placeholder="点击选择时间"
        @click="showPickerEnd = true"
      />
      <van-popup v-model="showPickerEnd" position="bottom">
        <van-datetime-picker
          v-model="end"
          type="datetime"
          title="选择结束时间"
          @confirm="(time)=>onConfirm(time,'end')"
          @cancel="showPickerEnd = false"
        />
      </van-popup>
      <div style="display:flex;justify-content:space-between;margin-top:18px">
        <div class="insearch" @click="onOK">搜索</div>
        <div class="inreset" @click="onCancel">重置</div>
      </div>
    </van-popup>
    <!-- 驳回 -->
    <van-popup
      v-model="rejectModal"
      position="bottom"
      :style="{ height: '35%' ,borderRadius:'20px 20px 0 0',padding:'15px'}"
    >
      <div style="font-size:15px;color:#020C1D;text-align:center;width:100%;">
        驳回打款
        <span style="position:absolute;right:20px;top:20px" @click="rejectModal = false">
          <img src="../../../static/appimg/close.png" alt style="width:10.67px;height:10.67px" />
        </span>
      </div>
      <div class="texteara">
        <el-input placeholder="请输入" v-model="rejectInfo.remark"></el-input>
      </div>
      <div class="reject_btn">
        <div class="cancel" @click="rejectModal = false">取消</div>
        <div class="rejectsure" @click="sureRejectClick">确定驳回</div>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  name: "commissionMake",
  data() {
    return {
      moneyInfo: {},
      activeName: "one",
      c5show: false,
      c5name: "开始时间",
      c6show: false,
      c6name: "结束时间",
      end: "",
      start: "",
      showPickerStart: false,
      showPickerEnd: false,
      info: {
        page: 1,
        page_size: 20,
        merchant_name: "",
        status: "",
        start: "",
        end: "",
        payment_type: "",
        pay_way: 0
      },
      rejectInfo: {
        id: "",
        remark: ""
      },
      loading: false,
      finished: false,
      list: [],
      total: 0,
      statusModal: false,
      timeModal: false,
      rejectModal: false,
      isColor: 0,
      show: false,
      show2: false,
      showText: "我是有底线的",
      showIf: false,
      showIf2: false,
      isDataLoaded: false,
      selectIndex: 0
    };
  },
  created() {
    this.getMoneyInfo();
    this.onLoad();
  },
  directives: {
    loadMore: {
      bind(el, binding) {
        const { changeStatus } = binding.value;
        const observable = new IntersectionObserver(
          (entries, observer) => {
            entries.forEach(entry => {
              //元素进入视野，触发加载数据
              if (entry.isIntersecting) {
                console.log("进入视野");
                changeStatus(entry.isIntersecting);
              } else {
                //离开视野
                console.log("离开视野");
              }
            });
          },
          {
            threshold: 0.5
          }
        );
        //监听元素滚动行为
        observable.observe(el);
      }
    }
  },
  methods: {
    onPayment(item){
      this.$router.push({
        path: "/mine/paymentMoney",
        query: { id: item.id }
      });
    },
    onOK() {
      this.info.page = 1;
      this.loading = false;
      this.finished = false;
      this.onLoad();
      this.timeModal = false;
    },
    onCancel() {
      this.info.end = "";
      this.info.start = "";
    },
    onConfirm(time, val) {
      let endOne = this.info.end;
      let startOne = this.info.start;
      if (val == "start") {
        if (this.info.end) {
          if (moment(endOne).isBefore(moment(time))) {
            this.$message.error("开始时间不能大于结束时间");
            return;
          }
        }
        this.info.start = moment(time).format("YYYY-MM-DD hh:mm:ss");
        this.showPickerStart = false;
      } else {
        if (this.info.start) {
          console.log("this.info.start", this.info.start);

          if (moment(time).isBefore(moment(startOne))) {
            this.$message.error("结束时间不能小于开始时间");
            return;
          }
        }
        this.info.end = moment(time).format("YYYY-MM-DD hh:mm:ss");
        this.showPickerEnd = false;
      }
    },
    changeStatus(value) {
      if (value && this.list.length < this.total) {
        this.info.page++;
        this.onLoad();
      }
    },
    detailClick(item) {
      this.$router.push({
        path: "/mine/paymentDetail",
        query: { id: item.id }
      });
    },
    rejectClick(val, index) {
      this.selectIndex = index;
      this.rejectModal = true;
      this.rejectInfo.remark = "";
      this.rejectInfo.id = val.id;
    },
    sureRejectClick() {
      axios
        .post("/own/commission/withdraws/reject", this.rejectInfo)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success("驳回成功");
            this.$set(this.list, this.selectIndex, {
              ...this.list[this.selectIndex],
              status: 5
            });
            // this.onLoad();
            this.rejectModal = false;
          } else {
            this.$message.error(response.data.msg.info);
            this.rejectModal = false;
          }
        });
    },
    isColorfun(val) {
      this.isColor = val;
    },
    resetClick() {
      this.isColor = 0;
    },
    recallClick() {
      if (this.isColor == 1) {
        this.info.status = 0;
      } else if (this.isColor == 2) {
        this.info.status = 1;
      } else if (this.isColor == 3) {
        this.info.status = 2;
      } else if (this.isColor == 4) {
        this.info.status = 5;
      }
      this.statusModal = false;
      this.info.page = 1;
      if (window.screen.width < 1080) {
        this.list = [];
        this.loading = false;
        this.finished = false;
        this.onLoad();
      } else {
        this.getlist();
      }
    },
    searchClick() {
      this.info.page = 1;
      if (window.screen.width < 1080) {
        this.list = [];
        this.loading = true;
        this.finished = true;
        this.onLoad();
      }
    },
    onLoad() {
      if (this.info.status == "10") {
        this.info.payment_type = "";
        this.show2 = true;
      } else {
        this.show = true;
        this.info.payment_type = 1;
      }
      axios
        .get("/own/commission/withdrawtakes", { params: this.info })
        .then(response => {
          this.show = false;
          const list = response.data.data.data;
          this.total = response.data.data.total;
          if (response.data.msg.code == 0) {
            list.sort((a, b) => new Date(b.withdraw_at) - new Date(a.withdraw_at));
            this.list = this.info.page == 1 ? list : this.list.concat(list);
            if (this.list.length >= this.total) {
              if (this.info.status == "10") {
                this.showIf2 = true;
              } else {
                this.showIf = true;
              }
            }
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    choosetab(tab, val) {
      this.activeName = tab;
      this.info.page = 1;
      if (val) {
        this.info.status = val.toString();
      } else {
        this.info.status = "";
        this.info.pay_way = 0;
      }
      if (window.screen.width < 1080) {
        this.list = [];
        this.loading = false;
        this.finished = false;
        this.onLoad();
      } else {
        this.getlist();
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    getMoneyInfo() {
      axios.get("/own/commission/money").then(response => {
        if (response.data.msg.code == 0) {
          this.moneyInfo = response.data.data;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: #f6f8fb;
  overflow: auto;
  .top {
    width: 100%;
    height: 95px;
    background: white;
    padding: 10px !important;
    display: flex;
    align-items: center;
    .wait_order {
      width: 25%;
      height: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .wait_money {
      width: 25%;
      height: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .today_money {
      width: 25%;
      height: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .history_add {
      width: 25%;
      height: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  .tabs_container {
    display: flex;
    width: 100%;
    height: 35px;
    background: white;
    padding: 0 20px;
  }
  .wares {
    font-size: 19px;
    color: #020c1d;
    font-weight: bold;
    font-family: "PingFang SC";
    position: relative;
    .line {
      background: #3158f1;
      width: 24px;
      height: 4px;
      border-radius: 6px;
      position: absolute;
      bottom: 0;
      left: 32px;
    }
  }

  .initial {
    font-size: 16px;
    color: #afb3bc;
    position: relative;

    .line {
      background: #3158f1;
      width: 24px;
      height: 4px;
      border-radius: 6px;
      position: absolute;
      bottom: 0;
      left: 32px;
    }
  }
  .search_for {
    width: 100%;
    height: 90px;
    background: white;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    border-radius: 0 0 15px 15px;
    .input_box {
      padding: 0 3px;
      width: 100%;
      height: 38px;
      background: red;
      display: flex;
      align-items: center;
      border: 1px solid #e3e8f1;
      background: #f6f8fb;
      justify-content: space-between;
      border-radius: 20px;
      .search_btn {
        width: 50px;
        height: 30px;
        background: #2757ff;
        color: white;
        font-size: 14px;
        text-align: center;
        line-height: 30px;
        border-radius: 20px;
      }
    }
    .filter {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      padding-left: 10px;
      color: #787d85;
    }
  }
  .tabulate {
    padding-bottom: 20px;
  }
  .list {
    width: 100%;
    padding: 0 15px;
    .inner {
      width: 100%;
      background: white;
      overflow: hidden;
      border-radius: 10px;
      padding-left: 15px;
      padding-right: 15px;
      .btn_container {
        justify-content: flex-end;
        display: flex;
        width: 100%;
        padding-bottom: 20px;
        .btn_inner {
          width: 70%;
          display: flex;
          justify-content: flex-end;
          margin-top: 20px;
        }
        .detail {
          width: 82px;
          font-size: 13px;
          height: 25px;
          border-radius: 12px;
          border: 1px solid #e3e8f1;
          background: #ffffff;
          color: black;
          text-align: center;
          line-height: 25px;
          color: #020c1d;
          margin-right: 6px;
        }
        .reject {
          width: 56px;
          font-size: 13px;
          height: 25px;
          border-radius: 12px;
          border: 1px solid #e3e8f1;
          background: #ffffff;
          color: black;
          text-align: center;
          line-height: 25px;
          color: #020c1d;
          margin-right: 6px;
        }
        .send_money {
          width: 56px;
          font-size: 13px;
          height: 25px;
          border-radius: 12px;
          border: 1px solid #e3e8f1;
          background: #ffffff;
          color: black;
          text-align: center;
          line-height: 25px;
          color: #020c1d;
          margin-right: 6px;
        }
      }
      .failed_reason {
        color: #ed7577;
        font-size: 14px;
        margin-top: 20px;
        white-space: normal;
        word-break: break-all;
        overflow: auto;
      }
    }
  }
  .commission_interval {
    width: 100%;
    font-size: 12px;
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
    color: #787d85;
    flex-wrap: wrap;
  }
  .commission_item {
    height: 35px;
    width: 78px;
    border: 1px solid #e3e8f1;
    border-radius: 10px;
    background: #f6f8fb;
    line-height: 35px;
    text-align: center;
  }
  .insearch {
    width: 45%;
    height: 40px;
    font-size: 15px;
    color: white;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    background: #2757ff;
  }
  .inreset {
    width: 45%;
    height: 40px;
    font-size: 15px;
    color: black;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    background: #f6f8fb;
    border: 1px solid #ccc;
  }
  .texteara {
    width: 100%;
    margin-top: 20px;
  }
  .reject_btn {
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .cancel {
      width: 45%;
      height: 40px;
      text-align: center;
      line-height: 40px;
      background: #005aff;
      color: white;
      font-size: 15px;
      border-radius: 25px;
    }
    .rejectsure {
      width: 45%;
      height: 40px;
      text-align: center;
      line-height: 40px;
      background: #e3e8f1;
      color: black;
      font-size: 15px;
      border-radius: 25px;
    }
  }
}
/deep/ .texteara .el-input__inner {
  height: 91px !important;
  border-radius: 6px !important;
  border: 0 !important;
  background: #f6f8fb;
  width: 100%;
}
/deep/ .input_box .el-input__inner {
  border: none !important;
  background: #f6f6f6;
  height: 36px !important;
  width: 260px !important;
}
/deep/ .van-nav-bar__content {
  background: #f6f6f6;
}
/deep/ .van-nav-bar .van-icon {
  color: black;
}
</style>